<template>
    <scroll-view :scroll-y="true" class="aiQuestionPageWrap" :style="{ paddingBottom: safeAreaInsets.bottom +'px' }">
        <view class="topWrap">
            <view class="flex">
                <view class="stepStyle center">Step1</view>
                <view style="font-weight: bold;font-size: 30rpx;margin-left: 40rpx;">
                    上传教材
                </view>
            </view>
            <view class="uploadStyle center" @click="uploadFile">
                <!-- <image src="./static/uploadTipsIcon.svg" style="width: 441rpx;height: 104rpx" @click="uploadFile"
                    v-if="!fileInfo.fileName" /> -->
                <view v-if="!fileInfo.fileName" class="center flex-column">
                    <image src="./static/wordTipIcon.svg" style="width: 86rpx;height: 86rpx;" />
                    <view class="textStyle" style="margin-top: 10rpx;">当前仅支持word格式文件</view>
                    <view class="textStyle" style="margin-top: 20rpx;">点击选择文档</view>
                </view>
                <view v-else style="width: 100%;">
                    <view class="fileItemStyle">
                        <image src="./static/fileIcon/word.svg"
                            style="width: 80rpx;height: 80rpx;margin-right: 22rpx" />
                        <view class="flex flex1 between">
                            <view style="font-size: 32rpx;width: 418rpx;" class="oneWrap">{{fileInfo.fileName}}111
                            </view>
                            <view style="justify-content: flex-start;" class="center">
                                <image src="./static/delIcon.svg"
                                    style="width: 26rpx; height: 28rpx;margin-right: 16rpx;" />
                                <text style="color:#F53F3F;text-decoration: dashed;" @click.stop="onDelFile">删除</text>
                            </view>
                        </view>
                        <!-- <view class="flex flex-column">
                            <view style="font-size: 32rpx;width: 500rpx;" class="oneWrap">{{fileInfo.fileName}}</view>
                            <view style="margin-top: 8rpx;justify-content: flex-start;" class="center">
                                <image src="./static/delIcon.svg"
                                    style="width: 26rpx; height: 28rpx;margin-right: 16rpx;" />
                                <text style="margin-right: 44rpx;color:#F53F3F;text-decoration: dashed;"
                                    @click.stop="onDelFile">删除</text>
                            </view>
                        </view> -->
                    </view>
                </view>
                <!-- <button class="btnStyle center" style="margin-top: 61rpx;" @click="onOkUpload">
                    上传文档
                </button> -->
            </view>
            <view style="margin-top: 34rpx;color: #666666;font-size: 24rpx;">
                <view style="margin-bottom: 20rpx;">上传说明</view>
                <view v-for="(item, inde) in tipsInfo" style="line-height: 50rpx;text-align: justify;">
                    {{ inde + 1 }} 、{{ item }}
                </view>
            </view>
            <view style="margin: 62rpx 0 68rpx 0">
                <view class="flex">
                    <view class="stepStyle center">Step2</view>
                    <view style="font-weight: bold;font-size: 30rpx;margin-left: 40rpx;">
                        生成设置
                    </view>
                </view>
            </view>
            <view>
                <view class="flex">
                    <view class="required center" style="height: 80rpx;">题型分布</view>
                    <view class="flex flex-column flex1">
                        <view class="flex1 center newQuStyle" v-for="(item, index) in questionTypeArr" :key="index">
                            <image src="./static/subTree.svg"
                                style="width: 40rpx;height: 40rpx;margin-right: 20rpx;margin-left: 42rpx;"
                                @click="onSubData(index)" />
                            <view class="select" style=" position: relative;width: 180rpx;height: 80rpx;">
                                <MySelect :value="item.value" :localdata="qustionData"
                                    @change="(e) => changeData(e, item, index)" />
                                <image src="./static/upBotIcon.svg" class="upBotIcon" />
                            </view>
                            <image src="./static/linkIcon.svg" class="linkIconStyle" />
                            <input class="inputStyleScore" type="digit" placeholder="生成数量" :value="item.num"
                                @change="(e)=>onInputNum(e,item, index)" />
                        </view>
                    </view>
                </view>
                <view v-show="questionTypeArr.length" style="color:#37B874;text-align: end;" @click="onAddQu">
                    增加选项
                </view>
                <view class="btnScStyle" style="margin-top: 64rpx;" @click="()=>onQutionGenerate()">
                    <image src="./static/generateIcon.svg" style="width: 48rpx;height: 48rpx;margin-right: 24rpx;" />
                    试题生成
                </view>
            </view>
        </view>
        <view class="bottomWrap">
            <view class="titleWrap">
                <view class="stepStyle center">Step3</view>
                <view style="font-weight: bold;font-size: 30rpx;margin-left: 40rpx;">
                    生成情况
                </view>
            </view>
            <view v-if="fileList.length">
                <view class="resultStyle" v-for="item in fileList">
                    <view class="center">
                        <image src="./static/fileIcon/word.svg"
                            style="width: 80rpx;height: 80rpx;margin-right: 22rpx" />
                        <view class="flex flex-column">
                            <view style="font-size: 32rpx;width: 440rpx;" class="oneWrap">{{ item.fileName||"" }}</view>
                            <view style="color: #999;line-height: 50rpx;">
                                <text style="margin-right: 44rpx;">{{ item.status<5?'生成中':'已完成' }}</text>
                                        <text>{{ item.insertDate.split(" ")[0]||"--" }}</text>
                            </view>
                        </view>
                    </view>
                    <view :class="item.status!=5?'noSubmitBtn':'submitBtn'" @click="onSumitFile(item)">确认</view>
                </view>
            </view>
            <view v-else style="height: 450rpx" class="center">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
        </view>
        <!-- 查询当前所属机构 -->
        <BotMenu :isPopup="isAffiliationPopup" @close="isAffiliationPopup = false" title="选择服务机构">
            <scroll-view :scroll-y="true" style="height: 800rpx;">
                <view class="selectTypeItem" v-for="item in organList" :key="item.id" @click="()=>onSelectOrgan(item)">
                    {{ item.name }}
                </view>
            </scroll-view>
        </BotMenu>
        <!-- 兑换明细 -->
        <BotMenu :isPopup="isExchangeDetails" @close="isExchangeDetails = false" title="兑换明细">
            <view class="exchangeWrap">
                <view class="exchangeStyle">
                    <view class="topStyle">
                        <view class="leftStyle">
                            <image src="./static/smallIcon/topTitile.svg" />
                            <text style="color: #fff;">{{ `本次兑换${this.selectAiInfo.itemNum || 0}道` }}</text>
                        </view>
                        <view class="rightStyle">
                            <image src="./static/smallIcon/yellowMoneyIcon.svg" />
                            <text>余额：{{ modeConfig.userWalletVO.userBalance || 0 }}</text>
                            <view class="lineStyle"></view>
                            <text>积分：{{ modeConfig.userWalletVO.userScore || 0 }}</text>
                        </view>
                    </view>
                    <scroll-view :scroll-y="true" class="centerStyle" v-if="modeConfig.currentModelType == 2">
                        <view v-for="item in modeConfig.infoList" style="margin-bottom: 16rpx;">
                            <text>{{ `试题区间:${item.startInterval || 0}-${item.endInterval || 0},` }}</text>
                            <text>{{ `单价: 金额:${item.stepCost || 0}/道题` }}</text>
                            <text v-if="modeConfig.integralExchange">{{ `,或 积分:${item.stepIntegral}/道题` }}</text>
                        </view>
                    </scroll-view>
                    <scroll-view :scroll-y="true" class="centerStyle v-center" v-else>
                        <view style="margin-bottom: 16rpx;">
                            <text>{{ `试题数量:${this.selectAiInfo.itemNum || 0}` }}</text>
                            <text>{{ `单价: 金额:${item.fixedCost || 0}/道题` }}</text>
                            <text v-if="modeConfig.integralExchange">{{ `,或 积分:${item.fixedIntegral || 0}/道题` }}</text>
                        </view>
                    </scroll-view>
                    <view class="bottomStyle">
                        <text> {{ `总计：${modeConfig.totalAmountCost || 0}金额`}}</text>
                        <text v-if="modeConfig.integralExchange"> {{ `或${modeConfig.totalIntegralCost || 0}积分` }}</text>
                    </view>
                </view>
                <view class="v-center" style="margin:60rpx 0 0 40rpx" v-if="modeConfig.integralExchange">
                    <image src="./static/smallIcon/dhMethod.svg" style="width: 38rpx;height: 38rpx;margin-right: 26rpx;" />
                    <text>兑换方式：</text>
                    <view class="flex">
                        <view class="center" v-for="item in exchangeMethodDict" @click="selectMethod = item.value"
                            style="margin-right: 26rpx;">
                            <image :src="`./static/${selectMethod == item.value ? 'selectIcon' : 'noSelectIcon'}.svg`"
                                style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" />
                            <view style="margin-left: 10rpx;">{{ item.text }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="okBtn center" @click="onExchangeSubmit">
                确定
            </view>
        </BotMenu>
    </scroll-view>
</template>

<script>
import { QUESTION_TYPE } from "../data/TestQuestionsType"
import { getArrObjectByProperty, getBase64ByUrl, notificationFun, onShowTipInfo } from "../utils/PrjUtils";
import { aiDocumentConfim, aiUploadDocument, exchangeInfo, getOrganList, listFuncItemTaskAi } from "./services/myQuestionBankService";
export default {
    name: 'aiQuestionPage',
    data() {
        return {
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            // 默认过滤简答题
            qustionData: QUESTION_TYPE.filter(item => item.text != "简答题"),
            questionTypeArr: [
                { value: "0201", num: "", text: "单选题" },
            ],
            // questionListArr:[],
            // 文件信息
            fileInfo:{
                fileName:"",
                filePath:""
            },
            // 上页数据
            pInfo:{},
            // 查询数据列表
            fileList:[],
             // 提示信息
            tipsInfo: [
               "Ai智能生成流程：点击上传标准教材文档（当前仅支持word，文档中需包含知识结构目录)-设置生成题型及数量（此处为各知识点下试题类型的生成题量，非试题类型的总题量）-点击试题生成按钮-查看生成情况-确认导入试题-(首页-我的题库)查看Ai智能生成题库",
               "注：Ai生成各知识点下的试题数量可能与试题类型填入数量有所差异;需要上传的文件需发送到微信聊天中，可在微信聊天中选择需要上传的标准及教材",
                "注：AI生成题库会覆盖原有题库中的试题数据，请确定当前题库为空"
            ],
            // 所属机构弹出
            isAffiliationPopup:false,
            // 机构列表
            organList:[],
            // 选择的机构id
            organId:"",
            // 兑换方式
            exchangeMethodDict:[
                {text:"余额",value:1},
                {text:"积分",value:2},
            ],
            // 选择的模式
            selectMethod:1,
            // 选择模式的弹窗
            isExchangeDetails:false,
            // 模式的配置信息
            modeConfig:{},
            // 选择的ai信息
            selectAiInfo:{}
        };
    },
    methods: {
        // 新增试题
        onAddQu() {
            if (this.questionTypeArr.length >= 3) {
                return notificationFun("不能再增加选项了")
            }
            this.questionTypeArr = [
                ...this.questionTypeArr,
                { type: this.questionTypeArr[0].value, num: "" }
            ]
        },
        //删除
        onSubData(index) {
            if (this.questionTypeArr.length <= 1) {
                return notificationFun("不能再减少选项了")
            }
            let data = [...this.questionTypeArr]
            data.splice(index, 1)
            this.questionTypeArr = data;
        },
        // 改变类型
        changeData(e, item, index) {
            // console.log(item.value)
            // console.log(this.questionTypeArr)
            // if(!){
            //     return notificationFun("不能选择相同类型试题")
            // }
            
            console.log(item,"---146")
            let dataSource = [...this.questionTypeArr]
            dataSource[index] = { ...item, value: e, text: getArrObjectByProperty(this.qustionData, "value", e)?.text }
            this.questionTypeArr = dataSource
        },
        // 更改分值
        onInputNum(e, item, index) {
            // 部分情况 , 事件参数e会有一定区别, 这里只需要 e.detail.value 是输入的那个字符串即可
            let num = e.detail.value.match(/^\d*(\.?\d{0,1})/g)[0] || null;
            let dataSource = [...this.questionTypeArr]
            dataSource[index] = { ...item, num }
            this.questionTypeArr = dataSource
        },
        // 上传文件
        uploadFile(){
            if(onShowTipInfo(this.pInfo.doing)){
                return;
            }
            let that=this
            wx.chooseMessageFile({
                type:"file",
                count: 1,  // 可选择的文件数量
                extension:['.doc','.docx'],  // 可选择的文件类型
                success: function (res) {
                    // console.log(res.tempFiles[0].path)  // 文件路径
                    // 进行文件上传操作
                    that.fileInfo = {
                        fileName:res.tempFiles[0].name,
                        filePath:res.tempFiles[0].path
                    }
                    // getBase64ByUrl(res.tempFiles[0].path,(base64)=>{
                        
                    // })  
                }
            })
        },
        // 开始上传
        onOkUpload(event){
            if(this.fileInfo.fileName == ""){
                return notificationFun("请先上传文件")
            }
            // 阻止事件冒泡
            event.stopPropagation()
            console.log(this.fileInfo)
        },
        // 删除文件
        onDelFile(){
            this.fileInfo = {
                fileName:"",
                filePath:""
            }
        },
        onSelectOrgan(record){
            this.organId=record.organId;
            exchangeInfo({organId:record.organId,rightsType:1,quantity:this.selectAiInfo.itemNum}).then(res=>{
                this.modeConfig=res||{}
                this.isExchangeDetails=true;
            })
        },
        // // 试题生成
        // onQutionGenerate(isSelectStatus){
        //     console.log(this.questionTypeArr,"---187")
        //     if(this.fileInfo.fileName == ""){
        //         return notificationFun("请先上传文件")
        //     }
        //     else if(this.questionTypeArr.some(item => !item.value)){
        //         return notificationFun("请填写题型")
        //     }
        //     else if(this.questionTypeArr.some(item=>!item.num)){
        //         return notificationFun("请填写生成数量")
        //     }
        //     let param={
        //         subjectUuid:this.pInfo.subjectUuid,
        //         fileName:this.fileInfo.fileName,
        //         organId:this.organId??"",
        //         // itemTypeJson:JSON.stringify(this.questionTypeArr.map(item=>({type:item.value,cnt:item.num}))),
        //         // fileName,itemTypeJson ,base64
        //     }
        //     let urlArr = this.fileInfo.fileName.split('.')
        //     let headerText=urlArr[urlArr.length-1]+","
        //     // 选择机构后
        //     if(isSelectStatus){
        //         getBase64ByUrl(this.fileInfo.filePath, (base64) => {
        //             param.json = {
        //                 base64: headerText + base64,
        //                 itemTypeJson: this.questionTypeArr.map(item => ({ type: item.value, cnt: item.num }))
        //             }
        //             aiUploadDocument({ ...param }).then(res => {
        //                 notificationFun("上传成功")
        //                 this.fileInfo = {
        //                     fileName: "",
        //                     filePath: ""
        //                 }
        //                 this.questionTypeArr = [{ value: "0201", num: "", text: "单选题" },],
        //                 this.isAffiliationPopup = false;
        //                 this.onGetPlanList()
        //             })
        //         })
        //     }
        //     // 未选择机构
        //    else{
        //         getOrganList().then(res => {{
        //             this.organList = res
        //             if (Array.isArray(res) && res.length < 2) {
        //                 getBase64ByUrl(this.fileInfo.filePath,(base64)=>{
        //                     param.json={
        //                         base64 :headerText+base64,
        //                         itemTypeJson:this.questionTypeArr.map(item=>({type:item.value,cnt:item.num}))
        //                     }
        //                     aiUploadDocument({...param,organId:res[0]?.organId}).then(res=>{
        //                         notificationFun("上传成功")
        //                         this.fileInfo = {
        //                             fileName:"",
        //                             filePath:""
        //                         }
        //                         this.questionTypeArr=[{ value: "0201", num: "", text: "单选题" },],
        //                         this.onGetPlanList()
        //                     })
        //                 })
        //             }
        //             else {
        //                 this.isAffiliationPopup = true
        //             }
        //         }})
        //    }

          
        // },
        // 试题生成
        onQutionGenerate(){
            console.log(this.questionTypeArr,"---187")
            if(this.fileInfo.fileName == ""){
                return notificationFun("请先上传文件")
            }
            else if(this.questionTypeArr.some(item => !item.value)){
                return notificationFun("请填写题型")
            }
            else if(this.questionTypeArr.some(item=>!item.num)){
                return notificationFun("请填写生成数量")
            }
            let param={
                subjectUuid:this.pInfo.subjectUuid,
                fileName:this.fileInfo.fileName,
                // itemTypeJson:JSON.stringify(this.questionTypeArr.map(item=>({type:item.value,cnt:item.num}))),
                // fileName,itemTypeJson ,base64
            }
            let urlArr = this.fileInfo.fileName.split('.')
            let headerText=urlArr[urlArr.length-1]+","
            getBase64ByUrl(this.fileInfo.filePath, (base64) => {
                    param.json = {
                        base64: headerText + base64,
                        itemTypeJson: this.questionTypeArr.map(item => ({ type: item.value, cnt: item.num }))
                    }
                    aiUploadDocument({ ...param }).then(res => {
                        notificationFun("上传成功")
                        this.fileInfo = {
                            fileName: "",
                            filePath: ""
                        }
                        this.questionTypeArr = [{ value: "0201", num: "", text: "单选题" },],
                        this.isAffiliationPopup = false;
                        this.onGetPlanList()
                    })
                })
       
          
        },
        onExchangeSubmit(organId){
            aiDocumentConfim({aiUuid:this.selectAiInfo.uuid,organId:this.organId,payType:this.selectMethod}).then(res=>{
                notificationFun("操作成功")
                this.onGetPlanList()
            })
        },
        // 查询ai生成列表
        onGetPlanList(){
            listFuncItemTaskAi({subjectUuid:this.pInfo.subjectUuid}).then(res=>{
                this.fileList = res ||[]
            })
        },
        // 确认文件
        onSumitFile(record){
            
            // 如果是人工导题禁用
            if(this.pInfo.doing==1){
                return notificationFun("正在进行人工导题，暂不支持其他形式的试题录入")
            }
            else if(record.status!=5){
                return;
            }
            this.selectAiInfo=record
            getOrganList().then(res => {{
                    this.organList = res
                    if (Array.isArray(res) && res.length < 2) {
                        this.organId=res[0]?.organId
                       exchangeInfo({organId:res[0]?.organId,rightsType:1,quantity:record.itemNum}).then(res=>{
                            this.modeConfig=res||{}
                            this.isExchangeDetails=true;
                       })
                    }
                    else {
                        this.isAffiliationPopup = true
                    }
            }})
          
        },
    },
    onLoad(option){
        let info = JSON.parse(decodeURIComponent(option.info)) || {}
        console.log(info,"--205")
        this.pInfo = info
    },
    onShow(){
        if(this.pInfo.subjectUuid){
            this.onGetPlanList()
        }
    },
    mounted() {
        // Add your mounted logic here
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                // this.windowWidth = res.windowWidth
                // this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    computed: {
        // // 试题数据源
        // questionListArr() {
        //     // console.log(this.qustionData.filter(item => !this.questionTypeArr.some(it => it.value == item.value)),"--107")
        //     // return this.qustionData.filter(item => !this.questionTypeArr.some(it => it.value == item.value))
        //     // console.log(this.qustionData.filter(item => !this.questionTypeArr.some(it => it.value == item.value)),"--107")
        //     return this.qustionData.map(item=>({
        //         ...item,
        //         disable: this.questionTypeArr.some(it => it.value == item.value)
        //     }))
        //     // return this.qustionData
        // }
    },
    watch: {
        questionTypeArr: {
            handler(val) {
                this.qustionData=this.qustionData.map(item=>({
                    ...item,
                    disable: val.some(it => it.value == item.value)
                }))
            },
            deep: true
        }
    },

};
</script>

<style scoped lang="scss">
.aiQuestionPageWrap {
    background-color: #f2f2f2;
    box-sizing: border-box;
    height: calc(100% - 1px);

    .stepStyle {
        border-radius: 30rpx 30rpx 0 30rpx;
        background-color: #F6FFF7;
        color: #37B874;
        height: 44rpx;
        width: 98rpx;
        font-size: 24rpx;
        font-weight: 600rpx;
    }

    .topWrap {
        padding: 66rpx 30rpx;
        box-sizing: border-box;
        background-color: #fff;
        border-bottom-right-radius: 24rpx;
        border-bottom-left-radius: 24rpx;
        margin-bottom: 20rpx;

        .uploadStyle {
            width: 100%;
            height: 200rpx;
            /* height: 340rpx; */
            border: 1rpx dashed #37B874;
            flex-direction: column;
            margin-top: 60rpx;
            border-radius: 24rpx;
            background-color: #F2F2F2;
            .textStyle{
                font-size: 24rpx;
                color: #bebebe;
            }
        }

        .btnStyle {
            width: 480rpx;
            height: 72rpx;
            border-radius: 24rpx;
            color: #fff;
            background-color: #37B874;
        }

        .required:before {
            display: inline-block;
            margin-right: 8rpx;
            content: "*";
            line-height: 1;
            font-size: 32rpx;
            color: #f04134;
        }

        .select {
            .upBotIcon {
                position: absolute;
                right: 26rpx;
                top: 50%;
                width: 18rpx;
                height: 12rpx;
                transform: translateY(-50%);
            }

            ::v-deep .uni-select {
                border: transparent;
                height: 80rpx !important;
            }

            ::v-deep.uni-stat__select {
                background-color: #F9F9F9;
                border-radius: 24rpx;
                border: none;
            }

            ::v-deep .uni-select__input-placeholder {
                font-size: 24rpx !important;
            }
        }

        .inputStyleScore {
            width: 180rpx;
            height: 80rpx;
            border-radius: 24rpx;
            background-color: #F9F9F9;
            text-align: center;
            font-size: 28rpx;
        }

        .newQuStyle {
            justify-content: space-between;
            margin-bottom: 40rpx;
        }

        .linkIconStyle {
            width: 28rpx;
            height: 28rpx;
            margin: 0 24rpx;
        }

        .btnScStyle {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 90rpx;
            box-shadow: 0px 1px 8px 0px #00000014;
            border-radius: 24rpx;
            background-color: #37B874;
            color: #fff;
        }
    }
    .fileItemStyle{
            padding: 0 38rpx;
            display: flex;
            align-items: center;
            /* justify-content: space-between; */
    }
    .bottomWrap {
        border-top-left-radius: 24rpx;
        border-top-right-radius: 24rpx;
        background-color: #fff;
        padding-bottom: 30rpx;
        min-height: calc(100vh - 1168rpx);
        .titleWrap {
            display: flex;
            padding: 48rpx 34rpx;
            border-bottom: 1rpx solid #F2F2F2;
        }
        
        .resultStyle{
            padding: 38rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #F2F2F2;
      
            .submitBtn{
                width: 120rpx;
                height: 48rpx;
                border-radius: 24rpx;
                background-color: #37B874;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .noSubmitBtn{
                width: 120rpx;
                height: 48rpx;
                border-radius: 24rpx;
                background-color: #eeeeee;
                border: 1rpx solid #E4E4E4;
                color: #999999;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    
    .selectTypeItem {
        display: flex;
        justify-content: center;
        padding: 32rpx 20rpx;
        border-bottom: 1rpx solid #eee;
    }
    .okBtn {
            padding: 32rpx;
            border-top: 1px solid #EEEEEE;
    }
 
    /* 兑换样式 */
    .exchangeWrap {
        padding: 0 36rpx 60rpx 36rpx;

        .exchangeStyle {
            background-color: #F2F9F8;
            border-radius: 24rpx;
            min-height: 350rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

            .topStyle {
                display: flex;
                justify-content: space-between;
                padding-right: 40rpx;

                .leftStyle {
                    width: 328rpx;
                    height: 114rpx;
                    position: relative;

                    image {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 328rpx;
                        height: 114rpx;
                        z-index: 1;
                    }

                    text {
                        position: absolute;
                        top: 22rpx;
                        left: 40rpx;
                        z-index: 2;
                        font-size: 28rpx;
                    }
                }

                .rightStyle {
                    display: flex;
                    align-items: center;
                    color: #37B874;
                    flex: 1;
                    justify-content: space-between;
                    height: 84rpx;
                    font-size: 26rpx;
                    margin-left: 36rpx;
                    white-space: nowrap;

                    image {
                        width: 26rpx;
                        height: 26rpx;
                    }

                    .lineStyle {
                        background-color: #C8F1DB;
                        width: 4rpx;
                        height: 18rpx;

                    }
                }
            }

            .centerStyle {
                font-size: 26rpx;
                color: #333333;
                padding: 0 40rpx;
                flex: 1;
                max-height: 300rpx;
            }

            .bottomStyle {
                border-top: 2rpx solid #FFFFFF;
                font-size: 28rpx;
                font-weight: 600;
                color: #37B874;
                padding: 24rpx 40rpx 24rpx 40rpx;

            }
        }
    }
}
</style>